<template>
	<view class="container-bg">
		<u-navbar leftIconColor="#fff" :title="goodsInfo.name" placeholder bgColor="#FFFFFF" :autoBack="true">
			<template #right>
				<image @click="hanldeCollect" class="navber-right"
					:src="isCollect ? '../../static/icon/has-like.png':'../../static/icon/no-like.png' " mode="">
				</image>

				<!-- <image class="navber-right" src="../../static/icon/share.png" mode="">
				</image> -->
			</template>
		</u-navbar>

		<view class="goods-image">
			<view class="goods-cover">
				<image :src="goodsInfo.cover" mode="widthFix">
				</image>
			</view>
		</view>

		<view>
			<view class="goods-bg">
				<view class="bottom bg-theme1 pad-24">
					<view class="font-w-600 font-32 color-theme">{{goodsInfo.name}}</view>
					<view class="centerY betweenX mar-top-20">
						<view class="centerY">
							<capsule color="#979797" bgColor="rgba(0,0,0,.1)" :number="goodsInfo.build" title="限量"></capsule>
							<capsule color="#979797" bgColor="rgba(0,0,0,.1)" title="流通" :number="goodsInfo.out_cnt - goodsInfo.broken_cnt" class="mar-left-20">
							</capsule>
						</view>

						<view @click="hanldeMarketGoodsList(goodsInfo.id)" class="font-24 color-grey centerY">其他寄售 <u-icon
								name="arrow-right" color="#C9C9C9" size="12"></u-icon>
						</view>
					</view>
				</view>
			</view>

			<view class="bg-theme1 author gap30 mar-top-20">
				<view class="pad-24 centerY betweenX">
					<view class="font-28 font-w-800 color-grey">品牌方</view>
					<view class="font-28 centerY mar-top-10 color-white">
						<image v-if="goodsInfo.issuer_info" class="logo" :src="goodsInfo.issuer_info.avatar">
						</image>
						<text v-if="goodsInfo.issuer_info" class="mar-left-10">{{goodsInfo.issuer_info.name}}</text>
					</view>
				</view>
				<view class="pad-24 centerY betweenX">
					<view class="font-28 font-w-800 color-grey">创作者</view>
					<view class="font-28 centerY mar-top-10 color-white">
						<image v-if="goodsInfo.author_info" class="logo" :src="goodsInfo.author_info.avatar">
						</image>
						<text v-if="goodsInfo.author_info" class="mar-left-10">{{goodsInfo.author_info.name}}</text>
					</view>
				</view>
			</view>

			<view class="betweenX bg-theme1 mar-top-20 pad-top-bottom-32 pad-left-right-24 mar-top-20">
				<view class="font-28">
					<text class="mar-right-20 color-grey">藏品编号</text>
					<text class="font-w-600 color-white">#{{codeInfo.code}}</text>
				</view>
				<view @click="hanldeFlowDoc" class="centerXY font-28 color-grey">查看流转记录 <u-icon class="mar-left-10"
						name="arrow-right" size="12" color="#C9C9C9"></u-icon></view>
			</view>

			<view class="pad-top-bottom-32 pad-left-right-24 bg-theme1 mar-top-20">
				<view class="my-font font-36 color-white">藏品介绍</view>
				<u-parse class="mar-top-24" :content="goodsInfo.desc"></u-parse>
			</view>

			<!-- 购买须知 -->
			<pay-notes></pay-notes>

			<view class="copyright centerX">
				<image src="../../static/icon/copyright.png" mode=""></image>
			</view>
		</view>

		<view class="button-box pad-left-right-32 pad-top-bottom-6 bg-theme1 centerY font-32">
			<view v-if="codeInfo.lock_scene == 'market'" class="button flex-w" @click="hanldeCancel">取消寄售</view>
			<view v-else class="button flex-w " @click="hanldePay">立即寄售</view>
		</view>

		<!-- 取消寄售弹窗 -->
		<my-popup content="确认取消此寄售吗？" :show="isPopup" @cancel="isPopup = false" @confirm="hanldeConfirm"></my-popup>
	</view>
</template>

<script>
	// 接口地址
	import {
		goodsDetails,
		codeDetails,
		cancelMarket
	} from '@/config/api.js'
	export default {
		data() {
			return {
				// 顶部颜色
				bgColor: 'transparent',
				// 收藏
				isCollect: false,
				// 编号详情
				codeInfo: {},
				// 藏品详情
				goodsInfo: {},
				// ta
				isPopup: false
			}
		},
		onLoad(options) {
			this.codeId = options.code_id;
			this.getDetails();
		},
		methods: {
			// 刷新当前详情接口
			isRefresh(){
				this.getDetails();
			},
			// 立即取消寄售
			hanldeConfirm() {
				cancelMarket({
					id: this.codeInfo.market_info.id
				}).then(res => {
					uni.$u.toast(res.msg);
					this.getDetails();
					this.isPopup = false;
				})
			},
			// 打开取消寄售弹窗
			hanldeCancel() {
				this.isPopup = true;
			},
			// 跳转流转记录
			hanldeFlowDoc() {
				uni.navigateTo({
					url: '/pages/my/flowDoc?codeId=' + this.codeInfo.id
				})
			},
			// 跳转去其他几首
			hanldeMarketGoodsList(goods_id) {
				uni.navigateTo({
					url: '/pages/market/marketGoodsList?goods_id=' + goods_id
				})
			},
			// 获取编号详情
			getDetails() {
				codeDetails({
					id: this.codeId
				}).then(res => {
					this.codeInfo = res.data.info;
					goodsDetails({
						id: res.data.info.goods_id
					}).then(goods => {
						goods.data.info.codeInfo = res.data.info;
						this.goodsInfo = goods.data.info;
					})
				})
			},
			// 跳转立即寄售
			hanldePay() {
				uni.setStorageSync('saleGoods', this.goodsInfo);
				uni.navigateTo({
					url: '/pages/my/consignments'
				})
			},
			// 收藏
			hanldeCollect() {
				this.isCollect = !this.isCollect;
			}
		},
		// 滚动事件
		onPageScroll(e) {
			if (e.scrollTop >= 100) {
				this.bgColor = '#FFFFFF';
			} else {
				this.bgColor = 'transparent'
			}
		}
	}
</script>

<style scoped lang="scss">
	.container-bg {
		// width: 740rpx;
		min-height: 100vh;
		background-image: url('../../static/image/my-bg.png');
		background-size: cover;
		background-color: #02000b;
		
		::v-deep .u-navbar__content {
			background-image: url('../../static/image/my-bg.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #f5f5f5;
		}
		
	}

	.navber-right {
		width: 48rpx;
		height: 48rpx;
	}

	.openBlindbox {
		border: 2rpx solid $uni-theme;
		text-align: center;
		height: 92rpx;
		line-height: 92rpx;
		border-radius: 46rpx;
		color: $uni-theme;
		width: 260rpx;
		box-sizing: border-box;
		margin-right: 30rpx;
	}


	.goods-image {
		position: relative;

		.goods-bg {
			display: block;
			width: 100%;
			height: 1124rpx;
		}

		.goods-cover {
			width: 100%;
			// height: 600rpx;
			// position: absolute;
			// bottom: 286rpx;
			display: flex;
			justify-content: center;

			image {
				display: block;
				width: 100%;
			}
		}
	}

	.goods-info {
		width: 100%;
		transform: translateY(-110rpx);

		.goods-bg {
			background: linear-gradient(45deg, #eb6569 29%, #ffedd6, #ff3c43);
		}
	}

	.logo {
		display: block;
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
	}

	.item {
		background: url('/static/icon/product-builder-bg.png') no-repeat;
		background-size: 100% 100%;
		flex: 1;
	}

	.copy {
		display: block;
		width: 28rpx;
		height: 28rpx;
	}

	.copyright {
		margin: 32rpx 0;
		padding-bottom: 150rpx;
	
		image {
			width: 329rpx;
			height: 55rpx;
		}
	}

	.button-box {
		position: fixed;
		width: 100%;
		bottom: 0;

		.button-price {
			margin-right: 100rpx;
		}

		.button {
			background:  $uni-bg-theme;
			color: #fff;
			text-align: center;
			height: 92rpx;
			line-height: 92rpx;
			border-radius: 50rpx;
			box-sizing: border-box;
		}
	}
</style>